<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>私聊列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" th:href="@{/读书1.jpg}" type="image/jpg" >
    <link rel="stylesheet" href="../static/layui-v2.5.7/layui/css/layui.css" th:href="@{/layui-v2.5.7/layui/css/layui.css}">
    <!--  -->
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../static/layui-v2.5.7/layui/layui.js" th:src="@{/layui-v2.5.7/layui/layui.js}"></script>
    <!--  -->
</head>

<style>

    body{
        background-color: rgb(246,246,246);
        min-width: 1450px;
    }

    .head{
         position: fixed;
         width:100%;
         top:0;
         z-index:1;
    }

    .head_div1{
        width:355px;
        height: 30px;
        display: inline-block;
        /* border: 1px solid red; */
        float: right;
        margin: 15px 15px 0px 0px;
        background-color:rgb(57,61,73);
    }

    .head_div1_input1{
        height: 30px;
        width: 300px;
        border-radius: 5px 5px 5px 5px;
        border: none;
        background-color:rgb(232, 232, 232);
        float: left;
    }


    .head_div1_button{
        height: 30px;
        width: 50px;
        border-radius: 5px 5px 5px 5px;
        background-color:rgb(57,61,73);
        border: 1px solid white;
        //font-family: '楷体';
        font-size: 15px;
        line-height: 30px;
        color: white;
        float: right;
    }

    .head_div2{
        float: right;
        display: inline-block;
        margin-right: 15px;
    }

    .head a {
        //color: black !important;
    }

    .write{
        background-color: white;
        /* 这个白边不能去 */
        //border: 1px solid red;
        margin: 75px auto 0px;
        width: 85%;
        height:50px;
    }

    .write_input{
        float:left;
        height:38px;
        border: 1px solid rgb(221,221,221);
        width: 87.5%;
        margin-left:30px;
        margin-top:10px;
        //border-radius:5px;
    }

    #button{
        float:right;
        margin-right:30px;
        margin-top:11px;
    }

    .div_body{
        background-color: white;
        /* 这个白边不能去 */
        border: 1px solid white;
        margin:auto;
        width: 85%;
        padding-bottom:20px;
        min-height:460px;
    }
   /*  */

   .div_body_div1{
       //border: 1px solid rgb(232, 232, 232);
        margin: 15px auto 0px;
        width: 95%;
        min-height:60px
   }

   .div_body_div1_div1{
        //border: 1px solid red;
        float:left;
        border-radius:25px;
        width: 50px;
        height:50px
        /*display:inline-block;*/
   }

   .div_body_div1_div1>img{
        float:left;
        border-radius:25px;
        width: 50px;
        height:50px
   }

   .div_body_div1_div2{
        border: 1px solid rgb(229,229,229);
        display:inline-block;
        margin-left:10px;
        border-radius:5px;
   }

    .div_body_div1_div2_div1{
        border-bottom: 1px solid rgb(229,229,229);
        //float:right;
        //width: 20%;
        height:30px;
        line-height:30px;
        //font-family:"楷体";
        padding-left:10px;
        padding-right:10px;
   }

   .div_body_div1_div2_div1_span1{
        font-size:14px;
        font-weight:700;
        color:rgb(108,117,125);
   }

   .div_body_div1_div2_div1_span2{
        font-size:12px;
        color:rgb(108,117,125);
        float:right;
        margin-left:5px;
   }

   .delete_i{
        float:right;
        font-size:12px;
        font-weight:900;
        color:rgb(108,117,125);
        margin-left:5px;
   }

   .div_body_div1_div2_div2{
        //border: 1px solid rgb(232, 232, 232);
        //float:left;
        max-width:350px;
        line-height:40px;
        font-size:14px;
        overflow:hidden;
        //font-family:"楷体";
        padding-left:10px;
        padding-right:10px;
   }

   /* */
    .div_page{
        background-color: white;
        /*border: 1px solid red;*/
        margin:0px auto 15px;
        width: 85%;
        height:60px
    }

   /*  */
    .div_foot {
        width: 100%;
        //border: 1px red solid;
        height: 100px;
        background-color: white;
        margin-top:10px;
        background-color: rgb(57,61,73);
    }

    a {
        text-decoration: none;
    }

    .div_foot_div1 {
        /* border: red 1px solid; */
        width: 990px;
        height: 85px;
        display: inline-block;
        position: relative;
        top: 10px;
        left: 240px;
        text-align: center;
        font-size: 12px;
        line-height: 150%;
        font-family: Arial, Verdana, 宋体;
        color:white;
    }

    .div_foot_div1 div {
        margin-top: 10px;
    }

    .div_foot_div1_div1 a {
        margin: 0 10px;
        color:white;
    }

   .layui-btn{
        float:right;
        margin-top:6px;
   }

</style>

<body>

<div class="head">
    <ul class="layui-nav">

        <li class="layui-nav-item">
            <a th:href="@{/index}">
                <i class="layui-icon layui-icon-home"></i>
                首页
            </a>
        </li>

        <li class="layui-nav-item ">
            <a href="">
                <i class="layui-icon layui-icon-notice"></i>
                系统消息
            </a>
        </li>

        <li class="layui-nav-item">
            <a href="javascript:;">
                <i class="layui-icon layui-icon-read"></i>
                文章类型
            </a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <dd><a th:href="@{/list/10/1}">Java</a></dd>
                <dd><a th:href="@{/list/11/1}">C++</a></dd>
                <dd><a th:href="@{/list/12/1}">Python</a></dd>
                <dd><a th:href="@{/list/13/1}">JavaScript</a></dd>
                <dd><a th:href="@{/list/14/1}">c语言</a></dd>
                <dd><a th:href="@{/list/15/1}">云计算</a></dd>
            </dl>
        </li>

        <li class="layui-nav-item">
            <a th:href="@{/post}">
                <i class="layui-icon layui-icon-chat"></i>
                论坛
            </a>
        </li>


        <div class="head_div1">
            <input class="head_div1_input1">
            <button class="head_div1_button"><i class="layui-icon layui-icon-search" style="font-size: 25px;"></i></button>
        </div>

        <div class="head_div2">
            <li class="layui-nav-item layui-this">
                <a>
                    <i class="layui-icon layui-icon-dialogue"></i>
                    私聊列表
                </a>
            </li>
            <li class="layui-nav-item">
                <a th:href="@{/friends}">
                    <i class="layui-icon layui-icon-friends"></i>
                    好友列表
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <img th:src="${session.user.headImg}" class="layui-nav-img">
                    <span th:text="${session.user.username}">
                        2
                    </span>
                </a>

                <dl class="layui-nav-child">

                    <dd>
                        <a th:href="@{/personalInformation}">
                            <i class="layui-icon layui-icon-chat"></i>
                            个人信息
                        </a>
                    </dd>

                    <dd>
                        <a th:href="@{/outLogin(id = ${session.user.id})}">
                            <i class="layui-icon layui-icon-logout"></i>
                            退了
                        </a>
                    </dd>

                </dl>
            </li>
        </div>
    </ul>
</div>

<div class="write">
    <input class="write_input">
    <button type="button" class="layui-btn" id="button"><i class="layui-icon layui-icon-dialogue"></i>私信</button>
</div>

<div class="div_body">

<!--    <div class="div_body_div1">-->
<!--        <div class="div_body_div1_div1"><img src="../static/读书1.jpg"></div>-->

<!--        <div class="div_body_div1_div2">-->
<!--            <div class="div_body_div1_div2_div1">-->
<!--                <span class="div_body_div1_div2_div1_span1">宇哥</span>-->
<!--                <i class="layui-icon layui-icon-close delete_i"></i>-->
<!--                <span class="div_body_div1_div2_div1_span2">2021-03-02 02:02:30</span>-->
<!--            </div>-->
<!--            <div class="div_body_div1_div2_div2">-->
<!--                宾-->
<!--            </div>-->
<!--        </div>-->

<!--    </div>-->

</div>

<!-- 底部相同部分 -->
<div th:replace="foot::#foot"></div>

</body>
<!--  -->
<script th:inline="javascript">
    <!-- layui -->
    layui.use('element', function () {
        var element = layui.element;
    });

    //发送信息
    $("#button").click(function () {
         //webSocket消息发送
         ws_sendMsg();
         var message = $(".write_input").val();
         var fromId = [[${session.user.id}]];
         var toId = [[${toId}]];
         if(message == ""){
            layer.msg("请输入信息");
            return false;
         }

         //console.log("发送的消息:"+message);
         //console.log("fromId:"+fromId);
         //console.log("toId:"+toId);

        $.ajax({
            url:'/ImagineCommunity/addMessage',
            data:{message:message,
                  fromId:fromId,
                  toId:toId,
            },//数据
            success:function(res){
            console.log(toId);
                window.location.reload();
            }
        })
    })

    <!--  -->
    layui.use(['flow','form'],function(){
        var flow=layui.flow,form=layui.form;
        $('.div_body').empty();
        flow.load ({
            elem: '.div_body', //指定列表容器
            end:"下面没有更多消息了!",
            done:function(page,next){
                var list=[];
                var fromId = [[${session.user.id}]];
                var toId = [[${toId}]];

                //console.log("请求列表fromId:"+fromId);
                //console.log("请求toId:"+toId);

                $.ajax({
                    url:'/ImagineCommunity/messageList',
                    data:{pageNo:page,
                          fromId:fromId,
                          toId:toId,
                    },
                    success:function(res){
                        console.log(res);
                        $.each(res.page.items, function(index, item){
                            list.push(
                            "<div class='div_body_div1'>" +
                                "<div class='div_body_div1_div1'><img src=' " + item.headImg + " '></div>" +
                                "<div class='div_body_div1_div2'>" +
                                    "<div class='div_body_div1_div2_div1'>" +
                                        "<span class='div_body_div1_div2_div1_span1'>" + item.username + "</span>" +
                                        "<input type='hidden' class='message_id' value='" + item.id + "'>" +
                                        "<input type='hidden' class='from_id' value='" + item.fromId + "'>" +
                                        "<i class='layui-icon layui-icon-close delete_i'></i>" +
                                        "<span class='div_body_div1_div2_div1_span2'>" + item.createTime + "</span>" +
                                    "</div>" +
                                    "<div class='div_body_div1_div2_div2'>" + item.content + "</div>" +
                                "</div>" +
                            "</div>"
                            );
                        })
                        next(list.join(''), page < res.page.pageTotal);
                    }
                })
            }
        })
    })
    <!--  -->

    //删除私聊信息
    $(document).on("click",".delete_i",function(){
        var userId = [[${session.user.id}]];
        var messageId = $(this).parent().find('.message_id').val();
        var fromId = $(this).parent().find('.from_id').val();
        var thisClick = this;
        //console.log("用户id:"+userId+"发送人id："+sendUserId);
        layui.use('layer', function () {
            if(fromId!=userId){
                    return false;
            }
            if(fromId==userId){
                layer.confirm('确定要删除此信息么!', function (index) {
                    $.ajax({
                        url:'/ImagineCommunity/deleteMessage',
                        data:{messageId:messageId},
                        success:function(res){
                            layer.closeAll('dialog'); //关闭信息框
                            setTimeout(function(){
                                $(thisClick).parent().parent().parent().remove();
                            },500)
                        }
                    })
                })
            }
        });
    })

    <!-- webSocket -->
    var fromId = [[${session.user.id}]];
    var ws;
    var ws_url = "ws://2l67926i26.wicp.vip/ImagineCommunity/ws/"+fromId;
    var msg;
	$(function() {
		ws_connect();
	});
	function ws_connect() {
        if ('WebSocket' in window) {
            ws = new WebSocket(ws_url);
        } else if ('MozWebSocket' in window) {
            ws = new MozWebSocket(ws_url);
        } else {
            console.log('Error: 此浏览器不支持WebSocket.');
            return;
        }
        //webSocket建立连接
        ws.onopen = function () {
            console.log('WebSocket已经建立连接!');
        };
        //webSocket关闭
        ws.onclose = function () {
            console.log('WebSocket已经关闭!');
        };
        //webSocket返回消息
        ws.onmessage = function (message) {
			console.log(message.data);
            window.location.reload();
        };
	}
	//webSocket发送消息
	function ws_sendMsg() {
	    var message = $(".write_input").val();
        var toId = [[${toId}]];
		var sendMassage = "toId="+toId+"&msg="+message;
		ws.send(sendMassage);
	}
	//webSocket发送图片
	function ws_sendImg() {

	}
    <!-- webSocket结束 -->

    <!-- 浏览器关闭事件,浏览器关闭时向后台发送退出链接 -->
    $(window).unload(function(){
        $.ajax({
            url : "/ImagineCommunity/outLogin?id=[[${session.user.id}]]",
        })
    });

</script>
</html>
